<template>
    <div class="content" v-loading="load">
        <el-form label-width="80px" ref="formRef">
            <el-form-item label="楼层名" prop="bannrname">
                <el-input type="text" v-model="floorOne.floor"></el-input>
            </el-form-item>
            <el-form-item label="楼层图片" prop="bannerimg">
                <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="handleAvatarSuccess">
                    <div class="imgBox">
                        <el-icon v-if="floorOne.floorimage == ''" >
                            <Plus />
                        </el-icon>
                        <img :src="floorOne.floorimage" alt="" v-else>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="楼层描述">
                <el-input type="text" placeholder="暂无描述" v-model="floorOne.remark"></el-input>
            </el-form-item>
            <el-form-item label="楼层类型" prop="bannerLink">
                <el-select v-model="floorOne.typeids" multiple placeholder="Select" style="width: 240px">
                    <el-option v-for="(item,index) in typeList" :key="item.typeid" :label="item.type" :value="item.typeid" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reqAddFloor, reqEditFloor, reqGetTypeList } from '@/api/common';
import { TypeListType } from '@/types/book';
import { FloorType } from '@/types/floor';
import { tip } from '@/utils/alert';
import { getBase64 } from '@/utils/commonUse';
import { UploadProps } from 'element-plus';
import { onMounted, ref,watch } from 'vue';
import Cloud from 'leancloud-storage';
const typeList=ref<TypeListType[]>([])
const load=ref<boolean>(false)
const floorOne = ref<FloorType>(
    {
        floor: "",
        floorimage: "",
        remark: "",
        type: [],
        typeids:[]
    }
)
const temp=ref<FloorType>({...floorOne.value})

const emits=defineEmits(['emitChange','emitAdd'])
const props=defineProps<{
    FloorOne:FloorType|null
}>()

watch(()=>props.FloorOne,(newValue)=>{
    if(props.FloorOne){
        floorOne.value={...newValue} 
        floorOne.value.typeids=floorOne.value.type!.map(item=>item.typeid)
    }else{
        floorOne.value=temp.value
    }
})



const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgType = ['image/jpeg', 'image/png']
    if (imgType.indexOf(rawFile.type) == -1) {
        tip('图片格式为jpg', 'warning')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        tip('图片大小应为2MB', 'warning')
        return false
    }
    return true
}

const handleAvatarSuccess = (info: { file: any; }) => {
    getBase64(info.file, (base64: any) => {
        floorOne.value.floorimage = base64
    })
}

const getTypeList=()=>{
    reqGetTypeList(50,1).then(res=>{
        typeList.value=res.data.data.data
    })
}


const imgFormat = (base64: any) => {
    let cloudFile = new Cloud.File("banner.png", { base64 });
    return cloudFile.save()
}
const save=async()=>{
    load.value=true
    if(floorOne.value.floorimage!=props.FloorOne?.floorimage){
        let res:any=await imgFormat(floorOne.value.floorimage)
        floorOne.value.floorimage= res.attributes.url;
    }
    console.log(floorOne.value);
    if(props.FloorOne){
        console.log("修改");
        reqEditFloor(floorOne.value).then(res=>{
            tip(res.data.info,'success')
            floorOne.value=temp.value
            load.value=false
            emits("emitChange",{info:res.data.data,bool:false})
        })
    }else{
        console.log("添加")
        reqAddFloor(floorOne.value).then(res=>{
            tip(res.data.info,'success')
            floorOne.value=temp.value
            load.value=false
            emits("emitAdd",{info:res.data.data,bool:false})
        })
    }
    
}

onMounted(()=>{
    getTypeList()
})

</script>

<style scoped lang="scss">
.content {
    display: flex;
    justify-content: center;

    .el-form {
        .el-form-item {
            width: 400px;

            .el-button {
                width: 400px;
            }
        }

    }

    .imgBox {
        border: 1px solid #dbdbdb;
        width: 320px;
        height: 112px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;

        img {
            width: 100%;
        }

        .el-icon {
            color: #dbdbdb;
            font-size: 60px;
        }
    }
}
</style>